<template>
  <div class="island-edit">

    <div class="top-form">
      <div class="cover">
        <el-upload
            class="avatar-uploader"
            action=""
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
          <img v-if="island.background" :src="island.background" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>

      <div class="info">
        <el-form label-width="50px">
          <el-form-item label="名字" style="width: 820px">
            <el-input v-model="island.name"></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="island.description"
                      style="width: 770px;">
            </el-input>
          </el-form-item>
          <el-form-item label="类型" style="width: 820px;">
            <el-select v-model="island.type" placeholder="请选择">
              <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态" style="width: 820px;">
            <el-select v-model="island.status" placeholder="请选择">
              <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!--    <div class="tips">-->
    <!--      <div class="tip-list">-->
    <!--        <div class="tip" :class="{'tip-on' : currentTip === index}" @click="changeTip(index)" v-for="(tip,index) in tips">-->
    <!--          {{tip}}-->
    <!--        </div>-->
    <!--      </div>-->


    <!--    </div>-->

    <div  style="width: 1120px;margin-top: 20px">
      <WangEditor :intro-html="island.description" @setDescription="setDescription"/>
    </div>

    <div class="save-button">
      <el-button type="primary" @click="updateIsland">保存修改</el-button>
    </div>

  </div>

</template>

<script>

import UploadAuthVue from '@/components/UploadAuth.vue'
import OssUploader from '@/components/OssUploader.vue'
import WangEditor from "@/components/WangEditor";
import {client} from "@/utils/oss";

export default {
  components: {UploadAuthVue, OssUploader, WangEditor},
  data() {
    return {
      // 浪屿基本信息
      island: {},
      type: [
        {
          value: 0,
          label: '共创记忆'
        }, {
          value: 1,
          label: '共创文章'
        }, {
          value: 2,
          label: '共创帖子流'
        },
      ],
      status: [
        {
          value: 0,
          label: '正常'
        }, {
          value: 1,
          label: '不可发帖'
        }, {
          value: 2,
          label: '不可看帖'
        },
      ],
    }
  },

  mounted() {
    if (this.$route.params && this.$route.params.id) {
      this.island.id = this.$route.params.id
      this.getIslandInfo()
    }
  },

  methods: {
    getIslandInfo() {
      this.$api.getIslandInfo({id: this.island.id})
          .then(res => {
            this.island = res.data
          })
    },
    // 基本信息修改
    updateIsland() {
      this.island.background = this.imageUrl
      this.$api.updateIsland(this.island).then(() => {
        this.$message.success("成功")
        this.getIslandInfo(this.island.id)
      })
    },

    // 图片上传
    handleAvatarSuccess(res, file) {
      console.log(res, file)
    },
    beforeAvatarUpload(file) {
      client().multipartUpload(file.name || Date.now().toString(), file)
          .then((result) => {
            let url = result.res.requestUrls[0];
            this.imageUrl = url.split("?upload")[0]
          });
    },

    // 富文本编辑器内容设置
    setDescription: function (html) {
      this.island.description = html;//在父组件修改值
    },

    changeTip(index){
      this.currentTip = index
    }
  }
}
</script>

<style scoped lang="scss">

.island-edit {
  width: 1120px;
  display: flex;
  flex-direction: column;

  .top-form {
    width: 1120px;
    margin-top: 20px;
    display: flex;
    flex-direction: row;

    .cover {
      width: 300px;
      height: 200px;
      border-radius: 10px;
      overflow: hidden;

      .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }

      .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
      }

      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
      }

      .avatar {
        width: 300px;
        height: 200px;
      }


    }

    .info {
      width: 900px;
      height: 280px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

  }

  .tips{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 1120px;
    margin-top: 20px;

    .tip-list{
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .tip{
        padding: 10px 20px;
        border-radius: 5px;
      }

      .tip:hover{
        cursor: pointer;
      }

      .tip-on{
        background-color: #d9d8d8;
      }


    }
  }

  .save-button {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px
  }

  .question {
    padding: 10px 20px;
    border-radius: 10px;
    background: #eaeaea;
    margin: 10px 0;

    > div {
      margin: 10px 0;
    }


    .option {
      margin: 5px 0;

      label {
        cursor: pointer;
      }

      .chose-icon {
        display: inline-block;
        width: 8px;
        height: 8px;
        border: 3.5px solid #afafaf;
        margin-right: 10px;
        transform: translateY(2px);
        background: #fff;
        transition: 0.2s;
      }

      .chose-icon.chosen {
        transition: 0.2s;
        background: #619dff;
      }

      .chosen.wrong {
        background: #da6d6d;
      }

      .circle {
        border-radius: 50%;
      }
    }
  }
}
</style>
